<template>
  <div>
    <div v-if="visible">
      <a-spin :spinning="confirmLoading">
        <avue-form class="preview-form" :option="widgetFormPreview" @submit="submit" v-model="model"></avue-form>
        <a-tabs>
          <a-tab-pane tab="附件">
            <a-upload
              :headers="headers"
              :showUploadList="false"
              :multiple="true"
            >
              <span style="color: red" v-if="fileRequired">*</span
              ><span style="font-weight: 700">{{ fileTitle }}：</span>
            </a-upload>
            <div>
              <a-list itemLayout="horizontal" :dataSource="sysFileList">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-list-item-meta description>
                    <a style="color: #1890ff" slot="title" :href="buildFilePath(item.filePath)">{{
                      item.originalName
                    }}</a>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </div>
            <div>
              <span v-if="fileImgRequired" style="color: red">*</span
              ><span style="font-weight: 700">{{ fileImgTitle }}：</span>
              <div>
                <a-upload
                  v-if="imgLoading"
                  :headers="headers"
                  :multiple="true"
                  list-type="picture-card"
                  accept=".jpg, .png, .jpeg, .bmp"
                  :file-list="sysImgFileShowList.showList"
                  @preview="(file) => handlePreview(file)"
                >
                </a-upload>
              </div>
            </div>
            <div class="outer_box" v-if="previewVisible">
              <previewPicture
                @cancel="handleImgCancel"
                :fileList="sysImgFileShowList"
                :fileNum="previewNum"
              ></previewPicture>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { postAction, putAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import Vue from 'vue'
import { REDIS_INDEX, SOURCE_NAME } from '@/store/mutation-types'
import PreviewPicture from '@/components/tools/PreviewPicture.vue'

export default {
  name: 'TpFormDataStructureDetailModal',
  components: { PreviewPicture },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      widgetFormPreview: {},
      code: '', //表单编码
      confirmLoading: false,
      type: '', //新增还是编辑还是详情
      id: '', //表单数据ID
      url: {
        add: '/form/tpFormDataStructure/add',
        edit: '/form/tpFormDataStructure/edit',
        queryByCode: '/form/tpFormStructure/queryByCode',
        queryStructureById: '/form/tpFormDataStructure/queryStructureById',
        queryByFormCode: '/form/tpFormInfo/queryByFormCode',
      },
      //附件上传
      sysFileList: [],
      sysImgFileList: [], //图片
      sysImgFileShowList: { showList: [] }, //回显的图片数组
      imgLoading: true,
      previewVisible: false, //图片预览显隐
      previewNum: 0,
      fileRequired: true,
      fileImgRequired: true,
      fileTitle: '',
      fileImgTitle: '',
    }
  },
  created() {
    this.headers = {
      sourceName: Vue.ls.get(SOURCE_NAME),
      redisIndex: Vue.ls.get(REDIS_INDEX),
    }
  },
  methods: {
    //图片预览关闭
    handleImgCancel() {
      this.previewVisible = false
    },
    //图片预览
    handlePreview(file) {
      let id = file.response ? file.response.result.id : file.uid
      for (let index in this.sysImgFileShowList.showList) {
        let uid = this.sysImgFileShowList.showList[index].response
          ? this.sysImgFileShowList.showList[index].response.result.id
          : this.sysImgFileShowList.showList[index].uid
        if (id == uid) {
          this.previewNum = index
        }
      }
      this.previewVisible = true
    },
    buildFilePath(filePath) {
      return window._CONFIG['staticDomainURL'] + '/' + filePath
    },
    //初始化附件是否必填
    initFileRequired() {
      getAction(this.url.queryByFormCode, { code: this.code }).then((res) => {
        if (res.success) {
          //解析描述字段
          if (res.result.formDescribe) {
            let tempArr = res.result.formDescribe.split('\n')
            if (tempArr && tempArr.length > 0) {
              for (let index in tempArr) {
                if (tempArr[index].indexOf('附件') > -1) {
                  this.fileTitle = tempArr[index].split('：')[0]
                  this.fileRequired = tempArr[index].split('：')[1] == '必填' ? true : false
                }
                if (tempArr[index].indexOf('图片') > -1) {
                  this.fileImgTitle = tempArr[index].split('：')[0]
                  this.fileImgRequired = tempArr[index].split('：')[1] == '必填' ? true : false
                }
              }
            }
          }
        }
      })
    },
    //初始化
    init(form, code, type, id, model) {
      let widgetFormPreview = form
      this.code = code
      this.type = type
      //详情操作
      if (type == 'detail') {
        widgetFormPreview.menuBtn = false
        if (widgetFormPreview.column) {
          for (let i = 0; i < widgetFormPreview.column.length; i++) {
            widgetFormPreview.column[i].disabled = true
          }
        }
      }
      this.widgetFormPreview = widgetFormPreview
      this.id = id
      this.model = model
      this.visible = true
    },
    //初始化文件
    initFile(fileList) {
      //附件
      this.sysFileList = fileList.filter((item) => item.fileType == '5')
      //图片
      this.sysImgFileList = fileList.filter((item) => item.fileType == '0')
      //图片的预览数据
      this.sysImgFileShowList.showList = []
      if (this.sysImgFileList) {
        for (let index in this.sysImgFileList) {
          let showTemp = {}
          showTemp.name = this.sysImgFileList[index].originalName
          showTemp.uid = this.sysImgFileList[index].fileId
          showTemp.url = this.buildFilePath(this.sysImgFileList[index].filePath)
          showTemp.originalImage = showTemp.url
          this.sysImgFileShowList.showList.push(showTemp)
        }
      }
      this.imgLoading = true
    },
    //详情初始化
    edit(id) {
      getAction(this.url.queryStructureById, { id: id }).then((res) => {
        if (res.success) {
          this.type = 'detail'
          this.model = JSON.parse(res.result.dataStructure)
          this.id = id
          this.code = res.result.formCode
          this.widgetFormPreview = JSON.parse(res.result.formStructure)
          this.initFile(res.result.sysFileList)
          //详情操作
          this.widgetFormPreview.menuBtn = false
          if (this.widgetFormPreview.column) {
            for (let i = 0; i < this.widgetFormPreview.column.length; i++) {
              this.widgetFormPreview.column[i].disabled = true
            }
          }
          this.visible = true
          this.$nextTick(() => {
            this.initFileRequired()
          })
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    close() {
      this.widgetFormPreview = {}
      this.model = {}
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    //提交
    handleOk(val) {
      if (this.widgetFormPreview.column) {
        //编辑
        putAction(this.url.edit, { id: this.id, dataStructure: JSON.stringify(this.model) }).then((res) => {
          if (res.success) {
            this.handleCancel()
            return true
          }
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../../components/packages/styles/index.scss';
// @import '../../../components/packages/styles/index.scss';
</style>
<style scoped src="../../../components/packages/styles/index1.css">
</style>